/**
 * Created by NickNi on 2022/5/3.
 */
import React from 'react';
import { Row, Col } from 'antd';
import EchartsPie from '../charts/EchartsPie';
import DashBoardLogTable from '../tables/DashBoardLogTable';
import DashBoardDunsTable from '../tables/DashBoardDunsTable';
import { getDashBosrdData } from '../../service';
import { ArrowsAltOutlined } from '@ant-design/icons';
// import echarts from 'echarts';
import moment from 'moment';
import screenfull from 'screenfull';
const dateFormat = 'YYYY-MM-DD';
interface IProps {
    query: any;
}
interface IState {
    industry: any;
    companyType: any;
    companyList: any;
    logData: any;
    region: any;
    startTime: any;
    endTime: any;
    sumCount: any;
    employeNum: any;
}
class Dashboard extends React.Component<IProps, IState> {
    constructor(props: IProps) {
        super(props);
        this.state = {
            industry: {},
            companyType: {},
            companyList: {},
            logData: {},
            region: {},
            startTime: '',
            endTime: '',
            sumCount: '',
            employeNum: {},
        };
    }
    componentDidMount() {
        console.log(this.props);
        let currentDate = new Date(new Date(new Date().toLocaleDateString()).getTime());
        let starDate = new Date(
            new Date(new Date().toLocaleDateString()).getTime() - 30 * 24 * 60 * 60 * 1000
        );
        console.log(this.props.query.type);
        this.setState({
            startTime: moment(starDate).format(dateFormat),
            endTime: moment(currentDate).format(dateFormat),
        });
        console.log(this.props.query.type);
        let data: any;
        if (this.props.query.type === '1') {
            data = {
                start_time: moment(starDate).format(dateFormat),
                end_time: moment(currentDate).format(dateFormat),
                type: this.props.query.type,
            };
        } else {
            data = {
                start_time: moment(currentDate).format(dateFormat),
                end_time: moment(currentDate).format(dateFormat),
                type: this.props.query.type,
            };
        }
        console.log(data);
        this.queryDashBosrdData(data);
    }
    // 获取dashboard数据
    queryDashBosrdData = (data: any) => {
        getDashBosrdData(data).then((res) => {
            if (res) {
                let { companyList, companyType, industry, log, region, sumCount, employeNum } = res;
                let computerData = (data: any) => {
                    let regionAray = [];
                    for (let i = 0; i < data.key.length; i++) {
                        let obj = {
                            name: '',
                            value: '',
                        };
                        obj.name = data.key[i];
                        obj.value = data.values[i];
                        regionAray.push(obj);
                    }
                    return regionAray;
                };
                let regionData: any;
                let AreaOption: any;
                regionData = computerData(region);
                AreaOption = {
                    tooltip: {
                        trigger: 'item',
                    },
                    legend: {
                        bottom: 'bottom',
                        textStyle: {
                            color: '#fff',
                        },
                    },
                    series: [
                        {
                            name: '地区',
                            type: 'pie',
                            radius: '60%',
                            data: regionData,
                            emphasis: {
                                itemStyle: {
                                    shadowBlur: 10,
                                    shadowOffsetX: 0,
                                    shadowColor: 'rgba(255, 255, 255, 0.5)',
                                },
                            },
                            labelLine: {
                                normal: {
                                    length: 10, // 改变标示线的长度
                                    lineStyle: {
                                        color: '#fff', // 改变标示线的颜色
                                    },
                                },
                            },
                            label: {
                                normal: {
                                    // formatter: '{b}:{c}: ({d}%)',
                                    formatter: '{c}',
                                    textStyle: {
                                        fontWeight: 'normal',
                                        fontSize: 12,
                                        color: '#fff', // 改变标示文字的颜色
                                    },
                                },
                            },
                        },
                    ],
                };
                let companyTypeData = computerData(companyType);
                let companyTypeOption = {
                    tooltip: {
                        trigger: 'item',
                    },
                    legend: {
                        bottom: 'bottom',
                        textStyle: {
                            color: '#fff',
                        },
                    },
                    series: [
                        {
                            name: '地区',
                            type: 'pie',
                            radius: '60%',
                            data: companyTypeData,
                            emphasis: {
                                itemStyle: {
                                    shadowBlur: 10,
                                    shadowOffsetX: 0,
                                    shadowColor: 'rgba(255, 255, 255, 0.5)',
                                },
                            },
                            labelLine: {
                                normal: {
                                    length: 10, // 改变标示线的长度
                                    lineStyle: {
                                        color: '#fff', // 改变标示线的颜色
                                    },
                                },
                            },
                            label: {
                                normal: {
                                    // formatter: '{b}:{c}: ({d}%)',
                                    formatter: '{c}',
                                    textStyle: {
                                        fontWeight: 'normal',
                                        fontSize: 12,
                                        color: '#fff', // 改变标示文字的颜色
                                    },
                                },
                            },
                        },
                    ],
                };
                // let companyTypeOption = {
                //     // title: {
                //     //     text: '当月数据传输行业分类',
                //     //     left: 'center',
                //     //     textStyle: {
                //     //         color: '#fff',
                //     //         fontSize: 14
                //     //     }
                //     // },
                //     tooltip: {
                //         trigger: 'item',
                //     },
                //     legend: {
                //         bottom: 'bottom',
                //         textStyle: {
                //             color: '#fff',
                //         },
                //     },
                //     series: [
                //         {
                //             name: '企业性质',
                //             type: 'pie',
                //             radius: ['40%', '60%'],
                //             avoidLabelOverlap: false,
                //             itemStyle: {
                //                 borderRadius: 10,
                //                 borderColor: '#fff',
                //                 borderWidth: 2,
                //             },
                //             label: {
                //                 // show: true,
                //                 // position: 'left',
                //                 // color: '#fff',
                //                 normal: {
                //                     // formatter: '{b}:{c}: ({d}%)',
                //                     formatter: '{c}',
                //                     textStyle: {
                //                         fontWeight: 'normal',
                //                         fontSize: 12,
                //                         color: '#fff', // 改变标示文字的颜色
                //                     },
                //                 },
                //             },
                //             emphasis: {
                //                 label: {
                //                     show: true,
                //                     fontSize: '24',
                //                     fontWeight: 'bold',
                //                     color: '#fff',
                //                 },
                //             },
                //             labelLine: {
                //                 show: true,
                //                 normal: {
                //                     length: 10, // 改变标示线的长度
                //                     lineStyle: {
                //                         color: '#fff', // 改变标示线的颜色
                //                     },
                //                 },
                //             },
                //             data: companyTypeData,
                //         },
                //     ],
                // };
                let employeNumData = computerData(employeNum);
                let employeNumOption = {
                    tooltip: {
                        trigger: 'item',
                    },
                    legend: {
                        bottom: 'bottom',
                        textStyle: {
                            color: '#fff',
                        },
                    },
                    series: [
                        {
                            name: '地区',
                            type: 'pie',
                            radius: '60%',
                            data: employeNumData,
                            emphasis: {
                                itemStyle: {
                                    shadowBlur: 10,
                                    shadowOffsetX: 0,
                                    shadowColor: 'rgba(255, 255, 255, 0.5)',
                                },
                            },
                            labelLine: {
                                normal: {
                                    length: 10, // 改变标示线的长度
                                    lineStyle: {
                                        color: '#fff', // 改变标示线的颜色
                                    },
                                },
                            },
                            label: {
                                normal: {
                                    // formatter: '{b}:{c}: ({d}%)',
                                    formatter: '{c}',
                                    textStyle: {
                                        fontWeight: 'normal',
                                        fontSize: 12,
                                        color: '#fff', // 改变标示文字的颜色
                                    },
                                },
                            },
                        },
                    ],
                };
                // let employeNumOption = {
                //     title: {
                //         text: '',
                //     },
                //     tooltip: {
                //         trigger: 'axis',
                //         backgroundColor: ' rgba(23, 99, 143, 0.75)',
                //         padding: [5, 10],
                //         // formatter(params: any) {
                //         //     let point = params[0];
                //         //     return '2019年' + point.name + '月 : ' + point.value;
                //         // },
                //     },
                //     // legend: {
                //     //     data: ['2019'],
                //     //     textStyle: {
                //     //         color: '#7aaab8',
                //     //         fontSize: 14,
                //     //     },
                //     // },
                //     calculable: true,
                //     xAxis: [
                //         {
                //             // name: '(月)',
                //             nameLocation: 'end',
                //             nameTextStyle: {
                //                 color: '#a0d7de',
                //                 fontSize: 16,
                //                 padding: [50, 0, 0, 10],
                //             },
                //             type: 'category',
                //             boundaryGap: false,
                //             data: employeNum.key,
                //             axisLine: {
                //                 show: false,
                //             },
                //             axisTick: {
                //                 show: false,
                //             },
                //             offset: 10,
                //             axisLabel: {
                //                 show: true,
                //                 textStyle: {
                //                     color: '#a0d7de',
                //                     fontSize: 12,
                //                 },
                //                 rotate: 15,
                //             },
                //             axisPointer: {
                //                 //基准线
                //                 lineStyle: {
                //                     color: '#52cdef',
                //                 },
                //             },
                //         },
                //     ],
                //     yAxis: [
                //         {
                //             axisLabel: {
                //                 show: true,
                //                 textStyle: {
                //                     color: '#a0d7de',
                //                     fontSize: 12,
                //                 },
                //             },
                //             axisTick: {
                //                 show: false,
                //             },
                //             axisLine: {
                //                 show: false,
                //             },
                //             // offset: 10,
                //             splitLine: {
                //                 show: true,
                //                 lineStyle: {
                //                     type: 'dashed',
                //                     color: ['#00f0ff'],
                //                 },
                //             },
                //         },
                //     ],
                //     series: [
                //         {
                //             // name: '2019',
                //             type: 'line',
                //             smooth: true,
                //             symbolSize: 10, //设定实心点的大小
                //             lineStyle: {
                //                 color: '#71df6f', //改变折线颜色
                //             },
                //             lineWidth: 2,
                //             itemStyle: {
                //                 normal: {
                //                     areaStyle: { type: 'default' },
                //                     color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                //                         { offset: 0, color: '#56ad66' },
                //                         { offset: 0.5, color: 'rgba(98, 199, 98, 0.3)' },
                //                         { offset: 1, color: 'rgba(98, 199, 98, 0.1)' },
                //                     ]),
                //                     borderColor: '#71df6f', //拐点边框颜色
                //                     borderWidth: 2, //拐点边框大小
                //                 },
                //             },
                //             data: employeNum.values,
                //         },
                //     ],
                // };
                let industryOption = {
                    // title: {
                    //     text: '当月数据传输DUNS数',
                    //     left: 'center',
                    //     textStyle: {
                    //         color: '#fff',
                    //         fontSize: 14
                    //     }
                    // },
                    // backgroundColor: '#08263a',
                    xAxis: [
                        {
                            show: true,
                            data: industry.key,
                            axisLabel: {
                                textStyle: {
                                    color: '#fff',
                                    fontSize: 8,
                                },
                                rotate: 15,
                            },
                        },
                        {
                            show: false,
                            data: industry.key,
                        },
                    ],
                    visualMap: {
                        show: false,
                        min: 0,
                        max: 8,
                        dimension: 0,
                        inRange: {
                            color: [
                                '#00D0FF',
                                '#00E0F1',
                                '#00EDD4',
                                '#72F6AF',
                                '#B7FA8A',
                                '#F9F871',
                            ],
                        },
                    },
                    yAxis: {
                        axisLine: {
                            show: false,
                        },
                        axisLabel: {
                            textStyle: {
                                color: '#fff',
                            },
                        },
                        splitLine: {
                            show: true,
                            lineStyle: {
                                color: 'rgba(255,255,255, 0.3)',
                            },
                        },
                        axisTick: {
                            show: false,
                        },
                    },
                    series: [
                        {
                            name: 'Simulate Shadow',
                            type: 'line',
                            data: industry.values,
                            z: 2,
                            showSymbol: true,
                            animationDelay: 0,
                            animationEasing: 'linear',
                            animationDuration: 1200,
                            label: {
                                normal: {
                                    show: true, //开启显示
                                    position: 'top', //在上方显示
                                    textStyle: {
                                        //数值样式
                                        color: '#fff',
                                        fontSize: 12,
                                    },
                                },
                            },
                            lineStyle: {
                                normal: {
                                    color: 'transparent',
                                },
                            },
                            areaStyle: {
                                normal: {
                                    color: '#022A53',
                                    shadowBlur: 50,
                                    shadowColor: '#333',
                                },
                            },
                        },
                        {
                            name: '传输数',
                            type: 'bar',
                            data: industry.values,
                            xAxisIndex: 1,
                            z: 3,
                            itemStyle: {
                                normal: {
                                    barBorderRadius: 5,
                                },
                            },
                        },
                    ],
                    animationEasing: 'elasticOut',
                    animationEasingUpdate: 'elasticOut',
                    animationDelay: function (idx: number) {
                        return idx * 20;
                    },
                    animationDelayUpdate: function (idx: number) {
                        return idx * 20;
                    },
                };
                this.setState({
                    industry: industryOption,
                    companyType: companyTypeOption,
                    companyList: companyList,
                    logData: log,
                    region: AreaOption,
                    sumCount: sumCount,
                    employeNum: employeNumOption,
                });
            }
        });
    };
    screenFull = () => {
        if (screenfull.isEnabled) {
            screenfull.toggle();
        }
    };
    render() {
        return (
            <div className="gutter-example">
                {/* <BreadcrumbCustom /> */}
                <div className="dashBoardTitle">
                    <h1 className="dashBoardTitle">
                        {`当${this.props.query.type === '1' ? '月' : '日'}数据日志纵览`}
                    </h1>
                    <div className="totalTime">
                        记录数：
                        <span
                            style={{
                                fontSize: '24px',
                                color: '#F9F871',
                            }}
                        >
                            {' '}
                            {this.state.sumCount}
                        </span>
                        <ArrowsAltOutlined
                            onClick={this.screenFull}
                            style={{
                                fontSize: '16px',
                                color: '#fff',
                                position: 'absolute',
                                right: '20px',
                                top: '10px',
                                zIndex: 100,
                            }}
                        />
                    </div>
                </div>
                <Row gutter={10}>
                    <Col className="gutter-row" md={7}>
                        <div className="gutter-box">
                            <h3 className="tit">
                                {`当${
                                    this.props.query.type === '1' ? '月' : '日'
                                }数据传输企业地区分表`}
                            </h3>
                            <EchartsPie option={this.state.region} />
                        </div>
                    </Col>
                    <Col className="gutter-row" md={10}>
                        <div className="gutter-box">
                            <h3 className="tit">
                                {`当${
                                    this.props.query.type === '1' ? '月' : '日'
                                }数据传输员工人数分表`}
                            </h3>
                            <EchartsPie option={this.state.employeNum} />
                        </div>
                    </Col>
                    <Col className="gutter-row" md={7}>
                        <div className="gutter-box">
                            <h3 className="tit">
                                {`当${
                                    this.props.query.type === '1' ? '月' : '日'
                                }数据传输企业性质分表`}
                            </h3>
                            <EchartsPie option={this.state.companyType} />
                        </div>
                    </Col>
                </Row>
                <Row gutter={10}>
                    <Col className="gutter-row" md={6}>
                        <div className="gutter-box dash-mt">
                            <h3 className="tit">
                                {`当${this.props.query.type === '1' ? '月' : '日'}数据传输日志`}
                            </h3>
                            <DashBoardLogTable logData={this.state.logData} />
                        </div>
                    </Col>
                    <Col className="gutter-row" md={12}>
                        <div className="gutter-box dash-mt">
                            <h3 className="tit">
                                {`当${
                                    this.props.query.type === '1' ? '月' : '日'
                                }数据传输企业行业分表`}
                            </h3>
                            <EchartsPie option={this.state.industry} />
                        </div>
                    </Col>
                    <Col className="gutter-row" md={6}>
                        <div className="gutter-box dash-mt">
                            <h3 className="tit">
                                {`当${this.props.query.type === '1' ? '月' : '日'}Duns传输日志`}
                            </h3>
                            <DashBoardDunsTable companyList={this.state.companyList} />
                        </div>
                    </Col>
                </Row>
            </div>
        );
    }
}

export default Dashboard;
